<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" type="success" @click="handleAdd"> 添加用户 </el-button>
    </div>

    <el-table :data="users" style="width: 100%">
      <el-table-column label="ID" type="index" align="center" />
      <el-table-column label="用户" align="center" prop="username" />
      <el-table-column label="角色" align="center">
        <template slot-scope="{row}">
          <el-tag
            v-for="(item, index) in row.roles"
            :key="index"
            style="margin:5px;"
          > {{ item }} </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button type="primary" @click="toEdit(row)"> 编辑 </el-button>
          <!-- <el-button type="danger" @click="handleDelete(row)"> 删除 </el-button> -->
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import { UsersDelete, UsersGets } from '@/api/user'

export default {
  name: 'User',
  components: { },
  filters: { },
  data() {
    return {
      formLabelWidth: '200px',
      device: null,
      userListLoading: false,
      users: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.userListLoading = true
      UsersGets().then(response => {
        this.userListLoading = false
        var data = response.data
        console.log(data)
        if (data === null) {
          this.users = []
        } else {
          for (var i = 0; i < data.length; i++) {
            data[i].roles = JSON.parse(data[i].roles)
          }
          this.users = data
        }
      })
    },
    // 提交保存
    handleSubmit() {
    },
    toEdit(row) {
      this.$router.push({ path: '/user/edit', query: row })
    },
    toInfo(row) {
      this.$router.push({ path: '/user/info', query: row })
    },
    handleAdd() {
      this.$router.push({ path: '/user/add' })
    },
    handleDelete(row) {
      this.$confirm('删除用户[' + row.username + '], 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        UsersDelete(row.username).then(response => {
          if (response.code === 200) {
            this.$message({
              type: 'success',
              message: response.message
            })
            this.fetchData()
          } else this.$message(response.message)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card{
  margin-bottom: 20px;
}

.plus{
  min-width: 100%;
  min-height: 300px;
  text-align: center;
  font-size: 108px;
}

 .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }

</style>
